<template>
  <div>
    <div class="detail-wrap">
      <el-form :model="blackRedFrom" :rules="rules" ref="blackRedFrom" label-width="130px" label-position="top">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="$t('channelsettings.redBlack2')" prop="BlackNum">
              <el-input size="mini"  v-model.trim="blackRedFrom.BlackNum" :maxlength="25" auto-complete="off" :disabled="showBread === 'addBlackRedList'?false:true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('channelsettings.redBlack1')" prop="Type">
              <el-select size="mini" v-model="blackRedFrom.Type" :placeholder="$t('public.pleasePick')" :disabled="showBread === 'addBlackRedList'?false:true" class="select">
                <el-option
                        v-for="item in BlackType"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                        >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="!isSimpleConfig">
          <el-col>
            <el-form-item label="PBX" prop="PBX">
              <el-select size="mini" v-model="blackRedFrom.PBX" :placeholder="$t('public.pleasePick')" :disabled="showBread === 'addBlackRedList'?false:true" class="select">
                <el-option
                        v-for="(item,index) in allPbxs"
                        :label="item.NickName + ' (' +item.PBX + ')'"
                        :value="item.PBX"
                        :key="index" >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col>
            <el-form-item :label="$t('public.remark')" prop="Memo">
              <el-input size="mini" type="textarea" v-model="blackRedFrom.Memo" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div v-if="!isSimpleConfig" class="fr btn-group">
        <el-button type="primary" class="primary_btn" @click.stop="save">{{$t('public.save')}}</el-button>
      </div>
      <div v-if="isSimpleConfig" class="footer">
        <el-button class='slide-box__button' @click='cancle'>
          {{$t('public.cancel')}}
        </el-button>
        <el-button class='slide-box__button' type="primary" @click.stop="save">
          {{$t('public.save')}}
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
  
  export default {
    name: 'BlackListDetail',
    data () {
      let checkBlackNum = (rule, value, callback) => {
      if (!value) {
        return callback(new Error(this.$t('validate.required')))
      }
      // let numPattern = new RegExp(/^((\d{11,12})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)$/)
      setTimeout(() => {
        if (/\D/g.test(value)) {
          callback(new Error('电话号码只能由数字组成'))
        } else {
          callback()
        }
      }, 100)
    }
      return {
        rules: {
          BlackNum: [
            { required: true, validator: checkBlackNum, trigger: 'blur' }
          ],
          Type: [
            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
          ],
          PBX: [
            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
          ]
        },
        allPbxs: this.$store.state.session.account.pbx || [],
        BlackType: [{value: '0', name: this.$t('channelsettings.redBlack6')}, {value: '1', name: this.$t('channelsettings.redBlack7')}, {value: '2', name: this.$t('channelsettings.redBlack8')}]
      }
    },
    props: {
      showBread: String,
      lastAllBlackRedList: Array,
      currentData: {
        type: Object,
        default: function () {
          return {}
        }
      },
      isSimpleConfig: {
        type: Boolean,
        default: function () {
          return false
        }
      }
    },
    methods: {
      cancle () {
        this.$emit('cancle')
      },
      save () {
        let data = {}
        if (this.currentData && this.showBread !== 'addBlackRedList') {
          data._id = this.currentData._id
        }
        data.Account = this.$store.state.session.account.account
        data.BlackNum = this.currentData.BlackNum || ''
        data.PBX = this.currentData.PBX || this.$store.state.session.user.pbx
        if (this.isSimpleConfig) {
//              简单设置
          data.PBX = this.PBX
        }
        data.Type = this.currentData.Type || ''
        data.Memo = this.currentData.Memo || ''
        let blackCacheList = this.lastAllBlackRedList || []
        this.$refs['blackRedFrom'].validate((valid) => {
          if (valid) {
            if (!data._id) { // 添加时没有id,排重
              for (let i = 0; i < blackCacheList.length; i++) {
                if (data.BlackNum === blackCacheList[i].BlackNum && data.Type === blackCacheList[i].Type && data.PBX === blackCacheList[i].PBX) {
                  this.$message.error(this.$t('call.blackNumExisted'))
                  return
                }
              }
            }
            this.$store.dispatch('saveBlackRedList', data).then(resp => {
              if (resp.success) {
                this.$emit('resh', 'isNeedPbx')
                this.$message.success(this.$t('config.channel.saveSuccess'))
                this.$emit('reload', false)
                this.$emit('cancle')
              } else {
                this.$emit('reload', true)
                this.$message.error(this.$t('config.channel.saveError'))
              }
            })
          } else {
            return false
          }
        })
      }
    },
    computed: {
      blackRedFrom () {
        return this.currentData || {}
      },
      PBX () {
        return this.$store.state.config.callCenter.currentPBX
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .detail-wrap
     padding 20px
     .select
       width 100%
     .warn-text
       padding-bottom 20px
       color $c-prompt
     .btn-group
       margin 20px 0 30px
     .el-upload-list
       float right
  .footer
    position absolute
    bottom 0
    left 0
    width 100%
    background rgba(255,255,255,1)
    box-shadow 0px -2px 4px 0px rgba(5,49,38,0.05)
    border-top 1px solid rgba(232,232,232,1)
    display flex
    justify-content center
    padding 13px 0
    box-sizing border-box
    .slide-box__button
      padding 8px 20px 8px
      box-sizing border-box
</style>
